<%@ include file="/WEB-INF/view/include.jsp"%>

<div class="t_tmiddle-right">
	<div id="tabs">
		<ul id="TabHeader">
			<li><a href="#MainDetails"><spring:message
						code="emp.visa.renewal.tab" /></a></li>
			<li><a href="#Attachments"><spring:message
						code="header.attachments" /></a></li>
			<li><a href="#Comments"><spring:message
						code="header.comments" /></a></li>
			<li><a href="#Summary"><spring:message code="header.summary" /></a></li>
		</ul>

		<spring:hasBindErrors name="filesIncomingBean">
			<script type="text/javascript">
				$(document)
						.ready(
								function() {
									jAlert(
											'error',
											'<li><div style="color:red;"><spring:message code="${errors.allErrors[0].code}" text="${errors.allErrors[0].defaultMessage}"/></div></li>',
											'<spring:message code="label.errormessage" />');
								});
			</script>
		</spring:hasBindErrors>

		<form:form modelAttribute="evRenewalModel" name="evRenewalModel"
			id="evRenewalModel" method="POST" enctype="multipart/form-data"
			class="t_form" action="${submitUri}">
			<spring:hasBindErrors name="evRenewalModel">
				<script type="text/javascript">
					$(document)
							.ready(
									function() {
										jAlert(
												'error',
												'<li><form:errors path="*" delimiter="<li>"/>',
												'<spring:message code="label.errormessage" />');
									});
				</script>
			</spring:hasBindErrors>

			<%@include file="MainTab.jsp"%>
			<%@include file="AttachmentsTab.jsp"%>
			<%@include file="CommentsTab.jsp"%>
			<%@include file="SummaryTab.jsp"%>
			
			<c:if test="${isResubmit}">
				<input type="hidden" name="isResubmit" value="${isResubmit}">
				<input type="hidden" name="appId" value="${appId}">
			</c:if>
			<div id="FNPPaymentInfoTab" class="t_pop_up">
				<%@include
					file="/WEB-INF/view/admin/general/payment/PaymentInfoTab.jsp"%>
			</div>
			<div id="backgroundPopup"></div>
			
			<c:choose>
				<c:when	test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
					<a id="termsAndConditionLink" href="resources/staticContents/termsAndConditions/EmploymentVisa/renewalTermsAndCondition_ar.jsp" style="display:none; ">terms and condition</a>
				</c:when>
				<c:otherwise>
					<a id="termsAndConditionLink" href="resources/staticContents/termsAndConditions/EmploymentVisa/renewalTermsAndCondition_en.jsp" style="display:none; ">terms and condition</a>
				</c:otherwise>
			</c:choose>
			
		</form:form>

	</div>
</div>
<!--Middle Right Close-->
<script>
	var $tabs;

	//Validation - Required fields
	$()
			.ready(
					function() {
						
						$("#termsAndConditionLink").fancybox({
							'width'				: '60%',
							'height'			: '30%',
					        'autoScale'     	: false,
					        'transitionIn'		: 'none',
							'transitionOut'		: 'none',
							'type'				: 'iframe',
							'modal'				:'true'
						});
						var checkTrmsAndCondsCookie = $.cookie('evrenewtrmsconds');
						
						if(checkTrmsAndCondsCookie == null){
							$("#termsAndConditionLink").trigger('click');
						}

						$(".topnav")
								.accordion(
										{
											accordion : false,
											speed : 500,
											closedSign : '<img src=\'resources/images/common/close.jpg\' />',
											openedSign : '<img src=\'resources/images/common/open.jpg\' />'
										});
						
						$("#evRenewalModel")
								.validate(
										{

											onfocusout : false,
											onkeyup : false,
											onclick : false,
											rules : {
												//Employee Details
												evrEmployeeId : "required",
												evrRenewalType : "required",
												evrMedLetterSubmission : "required"
												//Attachments
												<c:if test="${!isResubmit}">,passportCopy : "required", letterFromCompany : "required", photograph : "required"</c:if>
											},
											
											submitHandler: function (form) {
												blockPage();
												form.submit();
											},

											showErrors : function(errorMap,
													errorList) {

												var errors = '<ul>';
												var label;
												if (errorList.length) {
													$.each(errorMap, function(
															name, value) {
														label = $(
																"label[for='"
																		+ name
																		+ "']")
																.html();
														label = value + '['
																+ label + ']';
														errors = errors
																+ '<li>'
																+ label
																+ '</li>';

													});
													errors = errors + '</ul>';
													jAlert('error', errors,
															'<spring:message code="label.errormessage" />');
													return false;
												}
											}
										});// end $("#EmploymentVisaFrm").validate

						$tabs = $("#tabs").tabs();
						$('#TabHeader')
								.removeClass(
										'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
						$('#TabHeader > li')
								.removeClass(
										'ui-state-default ui-corner-top ui-state-active ui-state-hover');
						$('#tabs').removeClass(
								'ui-widget ui-widget-content ui-corner-all');

						$('#tabs').tabs(
								{
									select : function(event, ui) {

										var selected = $tabs.tabs('option',
												'selected'); // => 0
										var clicked = ui.index; // => 0

										if (selected > clicked)
											return true;

										var isValid = validate(clicked);// form validation returning true or false

										if (clicked == 3) {
											updateSummaryTab();
											//updateAttachmentsTab();
										}
										return isValid;
									}
								});

						$('#Main-Next').click(function() {			
							$tabs.tabs('select', 1);
							return false;
						});
						$('#Attachments-Prev').click(function() {			
							$tabs.tabs('select', 0);
							return false;
						});
						$('#Attachments-Next').click(function() {			
							$tabs.tabs('select', 2);
							return false;
						});
						
						$('#Comments-Prev').click(function() {			
							$tabs.tabs('select', 1);
							return false;
						});
						$('#Comments-Next').click(function() {			
							$tabs.tabs('select', 3);
							return false;
						});

						$('#strPostNo').val('Auto Generated');

						//CLOSING POPUP
						//Click the x event!
						$("#popupContactClose").click(function() {
							disablePopup();
						});
						//Click out event!
						$("#backgroundPopup").click(function() {
							disablePopup();
						});
						//Press Escape event!
						$(document).keypress(function(e) {
							if (e.keyCode == 27 && popupStatus == 1) {
								disablePopup();
							}
						});
					});

	function submitForm(divId) {
		if(validate(5)){
			$('#evRenewalModel').append($("#" + divId).html());
			var input = $("<input>").attr("type", "hidden").attr("name",
					"submitted").val("submitted");
			$('#evRenewalModel').append($(input));
			$.fancybox.showLoading();
			$('#evRenewalModel').submit();
		} else {
			return false;
		}
	}

	function validate(clicked) {
		//var selected = $tabs.tabs('option', 'selected'); // => 0		

		var result = true;
		
		if (clicked > 0) {
			result =  ($("#evRenewalModel").validate().element("#evrEmployeeId")
					&& $("#evRenewalModel").validate().element(
							"#evrRenewalType") && $("#evRenewalModel").validate().element(
							"#evrMedLetterSubmission"));
		}	
		
 		if (clicked > 1) {
 			result = result && ($("#evRenewalModel").validate().element("#PassportCopy")
 					&& $("#evRenewalModel").validate().element("#LetterFromCompany")
 					&& $("#evRenewalModel").validate().element("#Photograph"));
 		}
		
		return result;
	}

	function validatePayment() {
		return ($("#evRenewalModel").validate().element("#fnpServiceCode"));
	}

	function updateSummaryTab() {

		if($.browser.msie && $.browser.version.substr(0,1)<7){
			$("#evRenewalModel input[type=hidden]").each(function() {	
	       		$('#Summary input#sum'+$(this).attr('id')).val($("#cuselFrame-"+$(this).attr('id')+" .cuselText").html());
	       		$('#Summary input#sum'+$(this).attr('id')).attr('disabled', true);
	
	    	});
		}
		
		$("#evRenewalModel input[type=text]").each(function() {
	  		
			
	       		$('#Summary input#sum'+$(this).attr('id')).val(this.value);
	       		$('#Summary input#sum'+$(this).attr('id')).attr('disabled', true);

	    });
		 
	    $("#evRenewalModel select").each(function() {
	       		
	       		$('#Summary input#sum'+$(this).attr('id')).val($('#evRenewalModel select#'+$(this).attr('id')+ ' option:selected').text());
	       		$('#Summary input#sum'+$(this).attr('id')).attr('disabled', true);

	    });
	    
	    $("#evRenewalModel input[type=file]").each(function() {
	    	if(this.value != null && this.value != ''){
	    		$('#Summary input#sum'+$(this).attr('id')).val(this.value);
	    	} else {
	    		$('#Summary input#sum'+$(this).attr('id')).val($('#prev'+$(this).attr('id')).html());
	    	}
	       	$('#Summary input#sum'+$(this).attr('id')).attr('disabled', true);

	    });
	    
	    $("#evRenewalModel textarea").each(function() {

	       		$('#Summary textarea#sum'+$(this).attr('id')).val($(this).val());
	       		$('#Summary textarea#sum'+$(this).attr('id')).attr('disabled', true);

	    });
	    
	    <c:if test="${isCompanyAdmin}">
	    	$('#fnpServiceCode').rules("add", { required: true });
	    </c:if>
			  	

	}
	
	function handler() {
		$.fancybox.close();
	}
	jQuery(document).ready(
			function() {
				EmployeeSelectGrid.init("listemployee", "pager", handler);
				EmployeeSelectGrid.defineFieldMapping("empId",
						'<spring:message code="message.employee.id" />', "evrEmployeeId", true);
				EmployeeSelectGrid.defineFieldMapping("empPostNo",
						'<spring:message code="ctn.employee.post.no" />', "empPostNoMap", true);
				EmployeeSelectGrid.defineFieldMapping("empNationality",
						'<spring:message code="ctn.employee.nationality" />', "empNationalityMap", true);
				EmployeeSelectGrid.defineFieldMapping("empCECNo",
						'<spring:message code="ctn.employee.cec.no" />', "empCECNoMap", true);
				EmployeeSelectGrid.defineFieldMapping("empNameEn",
						'<spring:message code="ctn.employee.name" />', "empName", true);

				EmployeeAutoFiller.init("evrEmployeeId");
				EmployeeAutoFiller.defineFieldMapping("empNameEn",
				"empName");
				EmployeeAutoFiller.defineFieldMapping("empPostNo",
						"empPostNoMap");
				EmployeeAutoFiller.defineFieldMapping("empNationality",
						"empNationalityMap");
				EmployeeAutoFiller.defineFieldMapping("empCECNo",
						"empCECNoMap");
				EmployeeAutoFiller.fillFields();
			});
	function openInGrid() {
		$
				.fancybox('<div id="gridWrapperCont" style="width:600px;"><div id="TasksGrid"><table id="listemployee"></table><div id="pager"></div></div></div>');
		EmployeeSelectGrid.drawGrid();
	}
	
	function cancelForm(divId){
		fancyConfirm('<spring:message code="message.cancel_confirmation_message" />'
				,'<spring:message code="button.No" />'
				,'<spring:message code="button.yes" />'
				, function(ret) {
					if(ret == true){
						//cancel
						cancelProcess('${appId}');
					}
		});
	}
</script>